<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta charset='utf8' />
		<meta http-equiv="X-UA-Compatible" content="chrome=1" />
		<title>Example Phrase Structure Tree with AVMs</title>
		
		<script>
		if(!window.console){
			var console = {
				info:function(){},
				error:function(){},
				warn:function(){}
			}
		}
		</script>
		<!--<script src="../svgweb/src/svg-uncompressed.js" data-path="../svgweb/src"></script>-->
		<script src="../svg-tree-drawer.js"></script>
		<style>
		svg text,
		.treeNodeAVM {
			padding:0.5em;
			padding-left:1em;
			padding-right:1em;
		}
		
		svg line {
			font-size:2em; /*height not honored here by WebKit*/
		}
		math mtd {
			text-align:left;
		}
		math {
			
		}
		.treeNodeAVM {
			display:inline-block; /*each div wraps a math element, and inline block so we can get offsetHeight and offsetWidth*/
		}
		li math {
			
		}
		ol > li {
			margin-top:1em;
			padding-top:1em;
			border-top:solid 1px gray;
		}
		ol > li:first-child {
			border-top:0;
			padding-top:0;
			margin-top:0;
		}
		math,svg {
			page-break-inside:avoid;
		}
		li svg {
			vertical-align:top;
			
		}
		li.treeTheySeemedCloseToMeToSandy {
			
		}
		ol {
			margin-left:0;
			
		}
		li.treeTheySeemedCloseToMeToSandy svg {
			/*-moz-transform:rotate(90deg);*/
		}
		</style>
	</head>
	<body>
		<h1>Example Phrase Structure Tree with <abbr title="Attribute Value Matrix">AVM</abbr> Nodes</h1>
		
		<p>This example demonstrates the functionality of the <a href="http://code.google.com/p/svg-tree-drawer/">SVG Tree Drawer</a>.
		What follows is the phrase structure tree of “They seemed close to
		me.” <strong>You must have Firefox 3+ to view this tree
		properly,</strong> because only this browser currently supports both MathML and SVG.
		If you don't have Firefox 3+, see <a href="example-tree-with-avms.pdf">this page printed to PDF</a>.</p>
		
		<div id="s1" class='treeNodeAVM'>
			<math display="inline" xmlns="http://www.w3.org/1998/Math/MathML">
				<mfenced open='[' close=']'>
					<mtable>
						<mtr>
							<mtd><mi style="font-style:italic">phrase</mi></mtd>
						</mtr>
						
						<mtr>
							<mtd><mi>HEAD</mi></mtd>
							<mtd>
								<mi style="color:red">①</mi>
								<!--<mfenced open='[' close=']'>
									<mtable>
										<mtr>
											<mtd>
												<mi style='font-style:italic'>verb</mi>
											</mtd>
											<mtd>
												
											</mtd>
										</mtr>
									</mtable>
								</mfenced>-->
							</mtd>
						</mtr>
						<mtr>
							<mtd><mi>VAL</mi></mtd>
							<mtd>
								
								<mfenced open='[' close=']'>
									<mtable>
										<!--<mtr>-->
										<!--	<mtd columnspan="2" style="font-style:italic">val-cat</mtd>-->
										<!--</mtr>-->
										<mtr>
											<mtd><mtext>COMPS</mtext></mtd>
											<mtd>
												
												<mfenced open='〈' close='〉' separators="">

												</mfenced>
												
											</mtd>
										</mtr>
										<mtr>
											<mtd><mtext>SPR</mtext></mtd>
											<mtd>
												<mfenced open='〈' close='〉' separators="&#8199;">
												</mfenced>
											</mtd>
										</mtr>
											
									</mtable>
								</mfenced>
								
							</mtd>
						</mtr>
					</mtable>
				</mfenced>
			</math>
		</div>
		
		
		

		<div id="np1" class='treeNodeAVM'>
			<math display="inline" xmlns="http://www.w3.org/1998/Math/MathML">
				<mrow>
					<mi style="color:blue">②</mi>
					<mfenced open='[' close=']'>
						<mtable>
							<mtr>
								<mtd><mi style="font-style:italic">phrase</mi></mtd>
							</mtr>
							
							<mtr>
								<mtd><mi>HEAD</mi></mtd>
								<mtd>
									
									<mfenced open='[' close=']'>
										<mtable>
											<mtr>
												<mtd columnspan="2">
													<mi style='font-style:italic'>noun</mi>
												</mtd>
											</mtr>
											<mtr>
												<mtd>
													<mi>AGR</mi>
												</mtd>
												<mtd>
													<mi style="color:green">③</mi>
													<!--<mi style="color:red">①</mi>-->
												</mtd>
											</mtr>
										</mtable>
									</mfenced>
									
								</mtd>
							</mtr>
							<mtr>
								<mtd><mi>VAL</mi></mtd>
								<mtd>
									
									<mfenced open='[' close=']'>
										<mtable>
											<!--<mtr>-->
											<!--	<mtd columnspan="2" style="font-style:italic">val-cat</mtd>-->
											<!--</mtr>-->
											<mtr>
												<mtd><mtext>COMPS</mtext></mtd>
												<mtd>
													
													<mfenced open='〈' close='〉' separators="">

													</mfenced>
													
												</mtd>
											</mtr>
											<mtr>
												<mtd><mtext>SPR</mtext></mtd>
												<mtd>
													<mfenced open='〈' close='〉' separators="&#8199;">
													</mfenced>
												</mtd>
											</mtr>
												
										</mtable>
									</mfenced>
									
								</mtd>
							</mtr>
						</mtable>
					</mfenced>
				</mrow>
			</math>
		</div>
	

		<div id="vp1" class='treeNodeAVM'>
			<math display="inline" xmlns="http://www.w3.org/1998/Math/MathML">
				<mrow>
					<mfenced open='[' close=']'>
						<mtable>
							<mtr>
								<mtd><mi style="font-style:italic">phrase</mi></mtd>
							</mtr>
							
							<mtr>
								<mtd><mi>HEAD</mi></mtd>
								<mtd>
									<mi style="color:red">①</mi>
									<mfenced open='[' close=']'>
										<mtable>
											<mtr>
												<mtd columnspan="2">
													<mi style='font-style:italic'>verb</mi>
												</mtd>
											</mtr>
											<mtr>
												<mtd>
													<mi>AGR</mi>
												</mtd>
												<mtd>
													<mi style="color:green">③</mi>
													<!--<mi style="color:red">①</mi>-->
												</mtd>
											</mtr>
										</mtable>
									</mfenced>
									
								</mtd>
							</mtr>
							<mtr>
								<mtd><mi>VAL</mi></mtd>
								<mtd>
									<mi style="color:purple">④</mi>
									<mfenced open='[' close=']'>
										<mtable>
											<!--<mtr>-->
											<!--	<mtd columnspan="2" style="font-style:italic">val-cat</mtd>-->
											<!--</mtr>-->
											<mtr>
												<mtd><mtext>COMPS</mtext></mtd>
												<mtd>
													
													<mfenced open='〈' close='〉' separators="">

													</mfenced>
													
												</mtd>
											</mtr>
											<mtr>
												<mtd><mtext>SPR</mtext></mtd>
												<mtd>
													<mfenced open='〈' close='〉' separators="&#8199;">
														<mi style="color:blue">②</mi>
													</mfenced>
												</mtd>
											</mtr>
												
										</mtable>
									</mfenced>
									
								</mtd>
							</mtr>
						</mtable>
					</mfenced>
				</mrow>
			</math>
		</div>

		<div id="v1" class='treeNodeAVM'>
			<math display="inline" xmlns="http://www.w3.org/1998/Math/MathML">
				<mrow>
					<mfenced open='[' close=']'>
						<mtable>
							<mtr>
								<mtd><mi style="font-style:italic">word</mi></mtd>
							</mtr>
							
							<mtr>
								<mtd><mi>HEAD</mi></mtd>
								<mtd>
									<mi style="color:red">①</mi>
									<mfenced open='[' close=']'>
										<mtable>
											<mtr>
												<mtd columnspan="2">
													<mi style='font-style:italic'>verb</mi>
												</mtd>
											</mtr>
											<mtr>
												<mtd>AGR</mtd>
												<mtd>
													<mfenced open='[' close=']'>
														<mtable>
															<mtr>
																<mtd><mi style="font-style:italic">plural</mi></mtd>
															</mtr>
															<mtr>
																<mtd>NUM</mtd>
																<mtd>pl</mtd>
															</mtr>
															<mtr>
																<mtd>PER</mtd>
																<mtd>3rd</mtd>
															</mtr>
														</mtable>
													</mfenced>
												</mtd>
											</mtr>
										</mtable>
									</mfenced>
									
								</mtd>
							</mtr>
							<mtr>
								<mtd><mi>VAL</mi></mtd>
								<mtd>
									<mi style="color:purple">④</mi>
									<mfenced open='[' close=']'>
										<mtable>
											<!--<mtr>-->
											<!--	<mtd columnspan="2" style="font-style:italic">val-cat</mtd>-->
											<!--</mtr>-->
											<mtr>
												<mtd><mtext>COMPS</mtext></mtd>
												<mtd>
													
													<mfenced open='〈' close='〉' separators=",">
														<mi style="color:orange">⑤</mi>
														<!--<mi>⑥</mi>-->
													</mfenced>
													
												</mtd>
											</mtr>
											<mtr>
												<mtd><mtext>SPR</mtext></mtd>
												<mtd>
													<mfenced open='〈' close='〉' separators="&#8199;">
														<mi style="color:blue">②</mi>
													</mfenced>
												</mtd>
											</mtr>
												
										</mtable>
									</mfenced>
									
								</mtd>
							</mtr>
						</mtable>
					</mfenced>
				</mrow>
			</math>
		</div>




		<div id="ap1" class='treeNodeAVM'>
			<math display="inline" xmlns="http://www.w3.org/1998/Math/MathML">
				<mrow>
					<mi style="color:orange">⑤</mi>
					<mfenced open='[' close=']'>
						<mtable>
							<mtr>
								<mtd><mi style="font-style:italic">phrase</mi></mtd>
							</mtr>
							<mtr>
								<mtd><mi>HEAD</mi></mtd>
								<mtd>
									<mi style="color:brown">⑦</mi>
									<mfenced open='[' close=']'>
										<mtable>
											<mtr>
												<mtd columnspan="1">
													<mi style='font-style:italic'>adj</mi>
												</mtd>
											</mtr>
										</mtable>
									</mfenced>
									
								</mtd>
							</mtr>
							<mtr>
								<mtd><mi>VAL</mi></mtd>
								<mtd>
									<mfenced open='[' close=']'>
										<mtable>
											<mtr>
												<mtd><mtext>COMPS</mtext></mtd>
												<mtd>
													<mfenced open='〈' close='〉' separators=",">
														
													</mfenced>
												</mtd>
											</mtr>
											<mtr>
												<mtd><mtext>SPR</mtext></mtd>
												<mtd>
													<mfenced open='〈' close='〉' separators="&#8199;">
														
													</mfenced>
												</mtd>
											</mtr>
												
										</mtable>
									</mfenced>
									
								</mtd>
							</mtr>
						</mtable>
					</mfenced>
				</mrow>
			</math>
		</div>
		<div id="a1" class='treeNodeAVM'>
			<math display="inline" xmlns="http://www.w3.org/1998/Math/MathML">
				<mrow>
					<mfenced open='[' close=']'>
						<mtable>
							<mtr>
								<mtd><mi style="font-style:italic">word</mi></mtd>
							</mtr>
							<mtr>
								<mtd><mi>HEAD</mi></mtd>
								<mtd>
									<mi style="color:brown">⑦</mi>
									<mfenced open='[' close=']'>
										<mtable>
											<mtr>
												<mtd columnspan="1">
													<mi style='font-style:italic'>adj</mi>
												</mtd>
											</mtr>
										</mtable>
									</mfenced>
									
								</mtd>
							</mtr>
							<mtr>
								<mtd><mi>VAL</mi></mtd>
								<mtd>
									<mfenced open='[' close=']'>
										<mtable>
											<mtr>
												<mtd><mtext>COMPS</mtext></mtd>
												<mtd>
													<mfenced open='〈' close='〉' separators=",">
														<mi style="color:pink">⑧</mi>
													</mfenced>
												</mtd>
											</mtr>
											<mtr>
												<mtd><mtext>SPR</mtext></mtd>
												<mtd>
													<mfenced open='〈' close='〉' separators="&#8199;">
														
													</mfenced>
												</mtd>
											</mtr>
												
										</mtable>
									</mfenced>
									
								</mtd>
							</mtr>
						</mtable>
					</mfenced>
				</mrow>
			</math>
		</div>
		<div id="pp1" class='treeNodeAVM'>
			<math display="inline" xmlns="http://www.w3.org/1998/Math/MathML">
				<mrow>
					<mi style="color:pink">⑧</mi>
					<mfenced open='[' close=']'>
						<mtable>
							<mtr>
								<mtd><mi style="font-style:italic">phrase</mi></mtd>
							</mtr>
							<mtr>
								<mtd><mi>HEAD</mi></mtd>
								<mtd>
									<mi style="color:violet">⑨</mi>
									<mfenced open='[' close=']'>
										<mtable>
											<mtr>
												<mtd columnspan="1">
													<mi style='font-style:italic'>prep</mi>
												</mtd>
											</mtr>
										</mtable>
									</mfenced>
									
								</mtd>
							</mtr>
							<mtr>
								<mtd><mi>VAL</mi></mtd>
								<mtd>
									<mfenced open='[' close=']'>
										<mtable>
											<mtr>
												<mtd><mtext>COMPS</mtext></mtd>
												<mtd>
													<mfenced open='〈' close='〉' separators=",">
														
													</mfenced>
												</mtd>
											</mtr>
											<mtr>
												<mtd><mtext>SPR</mtext></mtd>
												<mtd>
													<mfenced open='〈' close='〉' separators="&#8199;">
														
													</mfenced>
												</mtd>
											</mtr>
												
										</mtable>
									</mfenced>
									
								</mtd>
							</mtr>
						</mtable>
					</mfenced>
				</mrow>
			</math>
		</div>
		<div id="p1" class='treeNodeAVM'>
			<math display="inline" xmlns="http://www.w3.org/1998/Math/MathML">
				<mrow>
					
					<mfenced open='[' close=']'>
						<mtable>
							<mtr>
								<mtd><mi style="font-style:italic">word</mi></mtd>
							</mtr>
							<mtr>
								<mtd><mi>HEAD</mi></mtd>
								<mtd>
									<mi style="color:violet">⑨</mi>
									<mfenced open='[' close=']'>
										<mtable>
											<mtr>
												<mtd columnspan="1">
													<mi style='font-style:italic'>prep</mi>
												</mtd>
											</mtr>
										</mtable>
									</mfenced>
									
								</mtd>
							</mtr>
							<mtr>
								<mtd><mi>VAL</mi></mtd>
								<mtd>
									<mfenced open='[' close=']'>
										<mtable>
											<mtr>
												<mtd><mtext>COMPS</mtext></mtd>
												<mtd>
													<mfenced open='〈' close='〉' separators=",">
														<mi style="color:magenta">⑩</mi>
													</mfenced>
												</mtd>
											</mtr>
											<mtr>
												<mtd><mtext>SPR</mtext></mtd>
												<mtd>
													<mfenced open='〈' close='〉' separators="&#8199;">
														
													</mfenced>
												</mtd>
											</mtr>
												
										</mtable>
									</mfenced>
									
								</mtd>
							</mtr>
						</mtable>
					</mfenced>
				</mrow>
			</math>
		</div>
		<div id="np2" class='treeNodeAVM'>
			<math display="inline" xmlns="http://www.w3.org/1998/Math/MathML">
				<mrow>
					<mi style="color:magenta">⑩</mi>
					<mfenced open='[' close=']'>
						<mtable>
							<mtr>
								<mtd><mi style="font-style:italic">word</mi></mtd>
							</mtr>
							<mtr>
								<mtd><mi>HEAD</mi></mtd>
								<mtd>
									<mfenced open='[' close=']'>
										<mtable>
											<mtr>
												<mtd columnspan="2">
													<mi style='font-style:italic'>noun</mi>
												</mtd>
											</mtr>
											<mtr>
												<mtd>AGR</mtd>
												<mtd>
													<mfenced open='[' close=']'>
														<mtable>
															<mtr>
																<mtd><mi style="font-style:italic">1sing</mi></mtd>
															</mtr>
															<mtr>
																<mtd>NUM</mtd>
																<mtd>sg</mtd>
															</mtr>
															<mtr>
																<mtd>PER</mtd>
																<mtd>1st</mtd>
															</mtr>
														</mtable>
													</mfenced>
												</mtd>
											</mtr>
										</mtable>
									</mfenced>
									
								</mtd>
							</mtr>
							<mtr>
								<mtd><mi>VAL</mi></mtd>
								<mtd>
									<mfenced open='[' close=']'>
										<mtable>
											<mtr>
												<mtd><mtext>COMPS</mtext></mtd>
												<mtd>
													<mfenced open='〈' close='〉' separators=",">
														
													</mfenced>
												</mtd>
											</mtr>
											<mtr>
												<mtd><mtext>SPR</mtext></mtd>
												<mtd>
													<mfenced open='〈' close='〉' separators="&#8199;">
														
													</mfenced>
												</mtd>
											</mtr>
												
										</mtable>
									</mfenced>
									
								</mtd>
							</mtr>
						</mtable>
					</mfenced>
				</mrow>
			</math>
		</div>

			<div id="treeTheySeemedCloseToMeToSandy"><em>Tree goes here… if it doesn't load, you're probably not using Firefox 3+!</em></div>
			
		<script>
		//<![CDATA[
		var tree = new TreeDrawer('treeTheySeemedCloseToMeToSandy',
			{label:/*S*/document.getElementById('s1'), children:[
				{label:/*NP*/document.getElementById('np1'), children:[
					//{label: 'N', children:[
						{label: 'They'}
					//]}
				]},
				{label:/*VP*/document.getElementById('vp1'), extended: true, children:[
					{label:/*V*/document.getElementById('v1'), children:[
						{label:'seemed'}
					]},
					{label:/*AP ⑤*/document.getElementById('ap1'), children:[
						{label:/*A*/document.getElementById('a1'), children:[
							{label:'close'}
						]},
						{label:/*PP ⑧*/document.getElementById('pp1'), children:[
							{label:/*P*/document.getElementById('p1'), children:[
								{label:'to'}
							]},
							{label:/*NP ⑩*/document.getElementById('np2'), children:[
								//{label:'N', children: [
									{label:'me'}
								//]}
							]}
						]}
					]}
				]}
			]}
		);
		tree.addFilter('label', function(label, treeNode){
			if(typeof label == 'string'){
				label = label.replace(/seemed/, 'appeared');
			}
			return label;
		});
		tree.draw();

		
		//]]>
		</script>
		
		<hr />
		<footer>
			<address><a href="http://weston.ruter.net/" rel="author">Weston Ruter</a></address>
			<time>2009-10-19</time>
		</footer>
	</body>
</html>